<template>
	<view class="page">
		<hx-navbar title="教学经历" :fixed="true" bar-placeholder="hidden" transparent="auto" :background-color="[255, 255, 255, 1]" color="#000000" @bindBack="bindBack" />

		<view class="wrapper" :style="{ 'padding-top': statusBarHeight + 16 + 'px' }">
			<view class="box">
				<view class="f_26 gery1">机构名称</view>
				<view class=""><input type="text" placeholder="请输入机构名称" placeholder-class="" class="b-b-ededed" v-model="title" /></view>
			</view>
			<view class="box">
				<view class="f_26 gery1">担任教师</view>
				<view class=""><input type="text" placeholder="请输入当时担任教师" placeholder-class="" class="b-b-ededed" v-model="name" /></view>
			</view>
			<view class="box">
				<view class="f_26 gery1">任职时长</view>
				<view class="dis-flex flex-x-between b-b-ededed time-box">
					<view class="picker_view">
						<picker mode="date" :value="startTime" :start="comTimes.star1" :end="comTimes.end1" @change="bindDateChange(0, $event)">
							<view class="uni-input" :class="startTime?'':'gery1'">{{ startTime ? setTime(startTime) : '开始时间' }}</view>
						</picker>
					</view>
					<view class="">—</view>
					<view class="picker_view">
					<picker mode="date" :value="endTime" :start="comTimes.star2" :end="comTimes.end2" @change="bindDateChange(1, $event)">
						<view class="uni-input">{{ endTime ? setTime(endTime) : '至今' }}</view>
					</picker>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="f_26 gery1">教学内容</view>
				<view class=""><textarea v-model="details" class="f_28" placeholder="请填写一些关于您这次课程的益处和帮助吧" placeholder-class="f_28" /></view>
			</view>
			<view class="btn-box dis-flex">
				<view class="btn delete flex-box t-c" v-if="index!=''" @click="del">删除</view>
				<view class="btn confirm flex-box t-c" @click="submit">{{index!=''?'确认修改':'确认'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
import { format,formatDate, setNewdate } from '@/static/uitls/common.js';
import { changeFormat } from '@/static/mixins/changeFormat.js';
import { statusBarHeight } from '@/static/mixins/statusBarHeight.js';
export default {
	name: 'add-experience',
	mixins: [changeFormat,statusBarHeight],
	data() {
		return {
			index:'',//如果是修改的话，上个页面传index过来
			scrollData: {},
			title: '', //机构名称
			name: '', //担任教师
			startTime: '', //开始时间
			endTime: '', //结束时间
			lastChangeType:0,//0开始时间 1 结束时间
			details: '' //教学内容
		};
	},
	onLoad(options) {
		if(options.index!=''&&options.index!=undefined){
			var pages = getCurrentPages();
			var prepage = pages[pages.length - 2]; //上一个页面
			this.index=options.index
			let {title,name,startTime,endTime,details} = prepage.$vm.experienceList[options.index]
			this.title = title
			this.name = name
			this.startTime = startTime
			this.endTime = endTime
			this.details = details	
		}
	},
	computed: {
		comTimes: function() {
			// 计算两个时间的起始时间
			const firstStartTime = setNewdate('y', -60, new Date());//开始时间
			let star1 = format(firstStartTime, 'yyyy-MM-dd');
			let end1 = format(setNewdate('d', -1, new Date()), 'yyyy-MM-dd');
			let star2 = format(firstStartTime, 'yyyy-MM-dd');
			let end2 = format(new Date(), 'yyyy-MM-dd');
			let { startTime, endTime,lastChangeType} = this;
			// if(new Date(formatDate(startTime))>new Date(formatDate(endTime))){ // 选择的开始时间大于结束时间
				if(lastChangeType==0){ // 刚才改了开始时间
					star2 = format(setNewdate('d', 1,new Date(formatDate(startTime))),'yyyy-MM-dd');
				}else{ // 刚才改了结束时间
					end1 = format(setNewdate('d', -1,new Date(formatDate(endTime))),'yyyy-MM-dd');
				}
			// }
			// app._log(startTime)
			let obj = {
				star1: star1,
				end1: end1,
				star2: star2,
				end2: end2
			};
			return obj;
		}
	},
	methods: {
		getToday(){
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			if (month < 10) {
			    month = "0" + month;
			}
			if (day < 10) {
			    day = "0" + day;
			}
			return year + "-" + month + "-" + day;
		},
		//提交
		submit(){
			let {title,name,startTime,details,endTime,index} = this
			let arr =[title,name,startTime,details]
			let error = ['机构名称不能为空','担任教师不能为空','开始时间不能为空','教学内容不能为空']
			for (let i = 0; i < arr.length; i++) {
				if(arr[i]==''){
					this.showToast(error[i])
					return;
				}
			}
			if(title!=''&&name!=''&&startTime!=''&&details!=''){
				var pages = getCurrentPages();
				var prepage = pages[pages.length - 2]; //上一个页面
				if(index!=''){
					prepage.$vm.experienceList[index].title = title
					prepage.$vm.experienceList[index].name = name
					prepage.$vm.experienceList[index].startTime = startTime
					if(endTime==''){prepage.$vm.experienceList[index].endTime=this.getToday()}else{prepage.$vm.experienceList[index].endTime=endTime}
					prepage.$vm.experienceList[index].details = details
				}else{
					let obj={}
					obj={
						title:title,
						name:name,
						startTime:startTime,
						endTime:endTime,
						details:details
					}
					if(endTime==''){obj.endTime=this.getToday()}else{obj.endTime=endTime}
					prepage.$vm.experienceList = prepage.$vm.experienceList.concat(obj);
				}
				uni.navigateBack()
			}
		},
		del(){
			var pages = getCurrentPages();
			var prepage = pages[pages.length - 2]; //上一个页面
			// prepage.$vm.experienceList=prepage.$vm.experienceList.splice(this.index,1)
			app._log(prepage.$vm.experienceList.splice(this.index,1))
			uni.navigateBack()
		},
		bindDateChange(i, e) {
			// app._log(i,e)
			let { value } = e.detail;
			if (i == 0) {
				this.startTime = value;
			} else {
				this.endTime = value;
			}
			this.lastChangeType=i
		},
		bindBack() {
			uni.showModal({
				title: '退出提醒',
				content: '课程价格填写未保存，是否退出',
				confirmColor: '#000000',
				success: function(res) {
					if (res.confirm) {
						uni.navigateBack();
					}
				}
			});
		}
	},
	onPageScroll(e) {
		this.scrollData = e;
	}
};
</script>

<style scoped lang="scss">
.b-b-ededed {
	border-bottom: 1px solid #ededed;
}

.page {
	background-color: white;
	.wrapper {
		padding: 32rpx 48rpx;
	}
	.btn-box {
		background: white;
		position: fixed;
		bottom: 0;
		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		width: 654rpx;
		.btn {
			line-height: 92rpx;
			border-radius: 16rpx;
		}
		.confirm {
			background-image: linear-gradient(270deg, #7f4aff 0%, #9254ff 100%);
			border-radius: 16rpx;
			color: white;
		}
		.delete {
			color: #8f8f9a;
			background-color: #f0f0f6;
			border-radius: 16rpx;
			margin-right: 24rpx;
		}
	}
	.box {
		input {
			height: 86rpx;
			margin-bottom: 48rpx;
		}
		textarea {
			width: 100%;
			height: 320rpx;
			background-color: #fafafa;
			border-radius: 16rpx;
			padding: 16rpx;
			margin-top: 26rpx;
		}
		.time-box{
			padding: 26rpx 0 18rpx 0;
			margin-bottom: 48rpx;
		}
	}
}
</style>
